<template>
  <div class="all">
    <div class="container-fluid">
      <div class="row daoh">
        <ul class="nav">
          <li class="nav-item">
            <span class="nav-link mntag" :class="active1(0)" @click="active3(0)">全部课程</span>
          </li>
          <li class="nav-item" v-for="(v,i) in getCatebagtype" :key="`1allclass${i}`">
            <span
              class="nav-link mntag"
              v-text="v.name"
              :class="active1(v.ID)"
              @click="active3(v.ID)"
            ></span>
          </li>
        </ul>
      </div>
      <div class="row connte heid">
        <div
          class="card pointer"
          v-for="(item, index) in arrer"
          :key="`2allclass${index}`"
          v-show="active2(index)"
        >
          <div class="card-header text-center size">
            <router-link :to="{name: 'typeclass',  params: { id: item.ID }}">
              <img :src="item.banner+ '?x-oss-process=style/style-400'">
            </router-link>
          </div>
          <div class="card-footer text-muted container-fluid">
            <div class="row">
              <div class="col">
                <h6>
                  <strong class="zifi" v-text="item.name"></strong>
                </h6>
              </div>
            </div>
            <div class="row">
              <div class="col Institute">
                <strong class="font14">哈工科教教研院</strong>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <strong class="font14" v-text="item.count"></strong>
                <span class="Learn">&nbsp;课时</span>
              </div>
              <div class="col text-right">
                <strong class="font14" v-text="item.number"></strong>
                <span class="Learn">&nbsp;人学过</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "allclass",
  data() {
    return {
      active: 0,
      arrer:[]
    };
  },
  computed: mapGetters(["getCatebagtype", "getCatebag"]),
  async mounted() {
    this.start();
  },
  methods: {
     start() {
     this.arrer =this.getCatebag.sort(this.compare("paixu")); 
     },
       compare(pro) { 
    return function (obj1, obj2) { 
        var val1 = obj1[pro]; 
        var val2 = obj2[pro]; 
        if (val1 < val2 ) { //正序
            return -1; 
        } else if (val1 > val2 ) { 
            return 1; 
        } else { 
            return 0; 
        } 
    } 
},
    active3(i) {
      this.active = i;
    },
    active1(i) {
      if (i === this.active) {
        return "active";
      }
    },
    active2(i) {
      if (this.getCatebag[i].catebagid) {
        return false;
      }
      if (this.active === 0) {
        return true;
      } else {
        if (this.active === this.getCatebag[i].typeid) {
          return true;
        }
        return false;
      }
    }
  }
};
</script>

<style scoped>
.font14 {
  width: 88px;
  height: 13px;
  font-family: "微软雅黑";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #999999;
}
.card {
  /* margin-top: 22px; */
  margin-bottom: 12px;
  /* margin-left: 25px; */
  margin-right: 11px;
  width: 281px;
  border: 1px solid #f5f7fa;
  border-radius: 6px;
  box-shadow: 4px 4px 5px #f5f7fa;
}
.most {
  height: 30px;
}
.card-header {
  height: 157px;
}
.daoh {
  margin-left: 10px;
  margin-bottom: 30px;
}
.mntag {
  cursor: pointer;
  border: 0px;
  border-radius: 12px;
  padding-right: 54px;
  color: #333333;
  font-size: 16px;
  font-family: "微软雅黑";
}

.mntag:hover {
  color: #409eff;
}

/*以下改动*/

.card-footer {
  background-color: white;
  height: 100px;
}

/*课程文件包*/
.size img {
  height: 157px;
  width: 280px;
  border-radius: 3% 3% 0 0;
}
.card-header {
  padding: 0px;
}
.pointer {
  cursor: pointer;
}

.card:hover {
  box-shadow: 5px 5px 5px #f3f3f3;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    background: #ffffff;
    border-radius: 1%;
  }
}
.size img {
  width: 280px;
}
.zifi {
  width: 181px;
  height: 17px;
  font-family: "微软雅黑";
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #444444;
}
.Learn {
  width: 27px;
  height: 12px;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #999999;
}
.Institute {
  margin-bottom: 17px;
  height: 16px;
}
.el-main {
  background: #f3f3f3;
}
.heid {
  margin-left: 7px;
}
.nav-item .active {
  color: #409eff;
}

.all {
  width: 1200px;
  min-height: 750px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.07);
}
h6 {
  margin-bottom: 3px;
}
</style>